<template>
	<view class="header">我的活动</view>

	<view class="activity-list">

		<!-- 已报名的活动 -->
		<view class="activity-card" v-for="activity in History" :key="activity.id">
			<!-- <view class="activity-image"></view> -->
			<view class="activity-content">
				<view class="status-tag status-registered">{{ getStatusText(activity.privateStatus) }}</view>
				<view class="activity-title">{{activity.title}}</view>
				<view class="activity-host">地点：{{activity.address}}</view>
				<view class="activity-time">开始时间：{{ formatTime(activity.createTime) }}</view>
				<view class="activity-time">结束时间：{{ formatTime(activity.endTime) }}</view>
				<view class="activity-footer">
					<view class="points">积分：{{activity.point}}</view>
					<view class="action-buttons">
						<button class="action-btn checkin-btn" @tap="handleCheckIn(activity.id,activity.privateStatus,activity.signInWay)">去打卡</button>
						<!-- <button class="action-btn cancel-btn">取消报名</button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// 导入打卡接口
	import { studentActivityHistoryApi, positionSignInAPI } from '../../http/card.js';
	// 导入 onShow 生命周期钩子
	import { onShow } from '@dcloudio/uni-app'
	// 导入 ref 函数
	import { ref } from 'vue'
	// 格式化时间
	import dayjs from 'dayjs'; // 导入 dayjs

	let pageNum = 1
	let pageSize = 10
	// let studentName = localStorage.getItem('username')


	// 学生已参加活动列表数据
	const History = ref([]);

	// 格式化时间的函数
	const formatTime = (timeStr) => {
		return dayjs(timeStr).format('YYYY-MM-DD HH:mm'); // 自定义格式
	};

	onShow(() => {
		studentActivityHistoryApi(pageNum, pageSize).then(data => {
			// 处理获取到的活动列表数据
			// console.log(data);
			History.value = data.records;
			console.log(History.value);
			console.log(History.value[0].signInWay);
		})
	})

// 新增：状态文本转换方法
	const getStatusText = (status: number) => {
		switch(status) {
			case 0: return '已取消';
			case 1: return '已报名';
			case 2: return '已打卡';
			case 3: return '未打卡';
			default: return '未报名';
		}
	};

	// 处理打卡按钮点击
	const handleCheckIn = (activityId:number,status:number,signInWay:number) => {
		if(signInWay==3){
			// 跳转到定位打卡详情页
				uni.navigateTo({
					url: `/pages/card/dingwei?id=${activityId}&status=${status}`
				});
		}
		else if(signInWay==1){
			// 跳转到数字打卡详情页
				uni.navigateTo({
					url: `/pages/card/shuzi?id=${activityId}&status=${status}`
				});
		}
		else if(signInWay==2){
			// 跳转到数字打卡详情页
				uni.navigateTo({
					url: `/pages/card/erweima`
				});
		}

		
	}

</script>

<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	body {
		background-color: #f5f5f5;
		color: #333;
		padding-bottom: 60px;
	}

	.header {
		padding: 15px;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.activity-list {
		padding: 15px;
	}

	.activity-card {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.activity-image {
		width: 100%;
		height: 150px;
		background-color: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		position: relative;
	}

	.activity-image::after {
		content: "活动图片";
		position: absolute;
	}

	.activity-content {
		padding: 15px;
	}

	.activity-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.activity-host {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.activity-time {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.activity-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.points {
		font-size: 14px;
		color: #ff9900;
	}

/* 新增状态样式 */
	.status-checked {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-unchecked {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.status-tag {
		font-size: 12px;
		padding: 3px 8px;
		border-radius: 4px;
		margin-bottom: 8px;
		display: inline-block;
	}

	.status-ended {
		background-color: #f5f5f5;
		color: #999;
	}

	.status-registered {
		background-color: #e6f7e6;
		color: #07c160;
	}

	.action-buttons {
		display: flex;
		gap: 10px;
	}

	.action-btn {
		padding: 5px 12px;
		border-radius: 15px;
		font-size: 12px;
		border: none;
		white-space: nowrap;
	}

	.checkin-btn {
		background-color: #07c160;
		color: white;
	}

	.cancel-btn {
		background-color: #fff;
		color: #ff4d4f;
		border: 1px solid #ff4d4f;
	}

	.nav-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 12px;
		color: #666;
	}

	.nav-item.active {
		color: #07c160;
	}
</style>